<template lang="jade">
    .weui_panel.weui_panel_access
        .weui_panel_bd
            cellColumn(v-bind:columnData="columnData")
            .weui_media_box.grid_items
                span.grid_item(v-for='(value, key, index) in items', v-bind:key='key', @click='value.href')
                    p.grid_item_name(v-bind:class="value.icon") {{value.name}}

</template>
<script>

/*global $*/
import Vue from 'Vue';
import cellColumn from './cell_column.vue';

export default {
  methods: {
  },
  computed: {},
  props: [ 'columnData'],
  watch: {},
  components: {cellColumn},
  events: {},
  data() {
    return {
        items: [{
            icon: 'icon-07',
            name: '体重', // 身体成长分析
            href: ''
        }, {
            icon: 'icon-08',
            name: '骨骼肌', // 肌肉脂肪分析
            href: ''
        }, {
            icon: 'icon-09',
            name: '体脂肪', // 肥胖分析
            href: ''
        }, {
            icon: 'icon-10',
            name: '身体质量指数', // 肌肉均衡分析
            href: ''
        }, {
            icon: 'icon-12',
            name: '体脂百分比', // 节段脂肪分析
            href: ''
        }, {
            icon: 'icon-13',
            name: '内脏脂肪等级', // 成长历史分析
            href: ''
        }]
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped>
.grid_items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
    padding-bottom: 0;
}

.grid_items:before {
    border-top: none;
}

.grid_item {
    padding: 10px 0;
    border-top: 1px solid #e5e5e5;
}

.grid_item:nth-child(2n) {
    border-left: 1px solid #e5e5e5;
    padding-left: 10px;
}

.grid_item .grid_item_name {
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 2rem;
    font-size: 0.9rem;
}

.icon-07 {
    background-image: url("../../../../assets/icon-07.png");
}

.icon-08 {
    background-image: url("../../../../assets/icon-08.png");
}

.icon-09 {
    background-image: url("../../../../assets/icon-09.png");
}

.icon-10 {
    background-image: url("../../../../assets/icon-10.png");
}

.icon-12 {
    background-image: url("../../../../assets/icon-12.png");
}

.icon-13 {
    background-image: url("../../../../assets/icon-13.png");
}
</style>
